|
一、setState
setState处在同步的逻辑中，异步更新状态，更新真实dom
setState处在异步的逻辑中，同步更新状态，同步更新真实dom
import React, { Component } from 'react'
export default class App extends Component {
state = {
num: 1
}
handleOnClick() {
this.setState({
num: this.state.num + 1
})
this.setState({
num: this.state.num + 1
})
this.setState({
num: this.state.num + 1
})
console.log(this.state.num)//输出结果num每次加1
}
render() {
return (
this.handleOnClick()
}}>{this.state.num}
setTimeout(() => {
this.setState({
num: this.state.num + 1
})
this.setState({
num: this.state.num + 1
})
this.setState({
num: this.state.num + 1
})
console.log(this.state.num)//输出结果num每次加3
}, 1000)
}}>{this.state.num}
)
}
}
setState 接受第二个参数，第二个参数回调函数，状态和dom更新完后就会被触发。
this.setState({
num: this.state.num + 1
}, () => {
console.log(this.state.num)
})
|